<template>  
    <div ref="chart" class="chart-container"></div>  
  </template>  
  
  <script>  
  import * as echarts from 'echarts';  
  import chinaMap from './china.json';  
  import guangdongMap from './json(省份)/guangdong.json';  
  import beijingMap from './json(省份)/beijing.json';  
  // 引入其他省份地图 JSON 文件...  
  
  // 地图注册信息  
  const maps = {  
    china: chinaMap,  
    guangdong: guangdongMap,  
    beijing: beijingMap,  
    // 其他省份地图...  
  };  
  
  // 注册地图  
  Object.keys(maps).forEach(mapName => {  
    echarts.registerMap(mapName, maps[mapName]);  
  });  
  
  // 省份列表  
  const provinces = ['北京', '广东']; // 可以在这里添加其他的省份  
  
  // 自动生成省份与地图名称的映射关系  
  const provinceMaps = provinces.reduce((acc, province) => {  
    const mapName = province.toLowerCase(); // 将省份名称转换为小写  
    acc[province] = mapName; // 添加到映射对象中  
    return acc;  
  }, {});  
  
  export default {  
    name: 'ChinaMap',  
    data() {  
      return {  
        currentMap: 'china',  
        chart: null,  
        provinceMaps, // 直接使用生成的映射关系  
      };  
    },  
    methods: {  
      initChart() {  
        this.chart = echarts.init(this.$refs.chart);  
        this.updateChart();  
      },  
      updateChart() {  
        const option = {  
          title: {  
            text: `点击省份查看 ${this.currentMap === 'china' ? '各省份' : '具体'} 地图`,  
            left: 'center',  
          },  
          tooltip: {  
            trigger: 'item',  
          },  
          visualMap: {  
            min: 0,  
            max: 1000,  
            left: 'left',  
            top: 'bottom',  
            text: ['高', '低'],  
            calculable: true,  
            inRange: {  
              color: ['#f4e9d9', '#fba1a1'],  
            },  
          },  
          series: [  
            {  
              name: '随机数据',  
              type: 'map',  
              map: this.currentMap,  
              roam: true,  
              itemStyle: {  
                emphasis: {  
                  label: {  
                    show: true,  
                  },  
                },  
              },  
              label: {  
                normal: {  
                  show: true,  
                },  
                emphasis: {  
                  show: true,  
                },  
              },  
              data: provinces.map(province => ({  
                name: province,  
                value: Math.round(Math.random() * 1000), // 这里随机生成数据，可以用实际数据替换  
              })),  
            },  
          ],  
        };  
  
        this.chart.setOption(option);  
        
        // 添加点击事件  
        this.chart.on('click', (params) => {  
          if (params.componentType === 'series') {  
            this.handleMapClick(params.name);  
          }  
        });  
  
        window.addEventListener('resize', this.chart.resize);  
      },
          // handleMapClick(name) {  
    //   // 点击省份下钻  
    //   if (name === '广东') {  
    //     this.currentMap = 'guangdong';  
    //   }  else {  
    //     this.currentMap = 'china'; // 点击其它省份返回中国地图  
    //   }  

    //   this.initChart(); // 重新初始化图表以展示选中的地图  
    // }   // 这里是单个的身份点击
    // handleMapClick(arrty) {  
    //   const targetMap = this.provinceMaps[arrty] || 'china'; // 默认回到中国地图       
    //         console.log(this.provinceMaps[arrty] );
    //         if (targetMap !== this.currentMap) {  
    //           this.currentMap = targetMap;  
    //           this.initChart(); // 重新初始化图表以展示选中的地图  
    //         }  
    // },    
      handleMapClick(name) {  
        const targetMap = this.provinceMaps[name] || 'china';  
        if (targetMap !== this.currentMap) {  
          this.currentMap = targetMap;  
          this.updateChart(); // 更新图表  
        }  
      },  
    },  
    mounted() {  
      this.initChart();  
    },  
    beforeUnmount() {  
      window.removeEventListener('resize', this.chart.resize);  
    },  
  };  
  </script>  
  
  <style scoped>  
  .chart-container {  
    width: 100%;  
    height: 100vh; /* 适应全高 */  
  }  
  </style>